<template>
  <!-- 用户管理 -->
  <div>
    <div class="form-row">
      <div class="form-item">
        <span>状态：</span>
        <el-select v-model="value" placeholder="请选择" style="width: 150px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>

      <div class="form-item">
        <span>姓名：</span>
        <el-input v-model="username" placeholder="请输入姓名" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>账号：</span>
        <el-input v-model="account" placeholder="请输入账号" style="width: 150px"></el-input>
      </div>

      <div class="form-item">
        <span>手机号：</span>
        <el-input v-model="telephone" placeholder="请输入手机号" style="width: 150px"></el-input>
      </div>

      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button type="success" @click="handleReset">重置</el-button>
    </div>


    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="status" label="状态">
        <template slot-scope="scope">{{ scope.row.status === 0 ? '启用' : '禁用' }}</template>
      </el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="telephone" label="手机号"></el-table-column>
      <el-table-column prop="headIcon" label="头像">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.headIcon"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="resetPassword(scope.row)" type="text" size="small">重置密码</el-button>
          <el-button type="text" size="small">封禁</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000"></el-pagination>
  </div>
</template>

<script>
import { selectByCondition, resetPassword } from "@/api/user";
export default {
  methods: {
    // 重置密码方法 - 参数名修正为userId
    async resetPassword(user) {
      // 验证用户ID是否存在
      if (!user || !user.user_id) {
        this.$message.error("无法获取用户ID，操作失败");
        return;
      }

      try {
        // 显示确认弹窗
        await this.$confirm(
          '是否确定将该用户的密码重置为"123456"？',
          '重置密码',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        );

        // 传递参数名为userId，值为后端返回的user_id
        await resetPassword({ userId: user.user_id });
        this.$message.success('密码重置成功，新密码为123456');
      } catch (error) {
        if (error !== 'cancel') {
          console.error('重置密码失败:', error);
          this.$message.error('重置密码失败，请稍后重试');
        }
      }
    },

    handleSearch() {
      const params = { 
        status: this.value, 
        username: this.username, 
        account: this.account, 
        telephone: this.telephone 
      };
      this.loadData(params);
    },

    handleReset() {
      this.value = this.username = this.account = this.telephone = '';
      this.loadData({});
    },

    async loadData(params) {
      try {
        const { data } = await selectByCondition(params);
        this.tableData = data || [];
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$message.error('加载数据失败，请稍后重试');
      }
    }
  },

  created() {
    this.loadData({});
  },

  data() {
    return {
      username: '',
      account: '',
      telephone: '',
      value: '',
      options: [
        { value: 0, label: '启用' }, 
        { value: 1, label: '禁用' }
      ],
      tableData: []
    };
  }
};
</script>

<style scoped>
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}

.form-item {
  display: flex;
  align-items: center;
}

.form-item span {
  margin-right: 8px;
  white-space: nowrap;
}

.pagination-left {
  margin-top: 10px;
  text-align: left;
}
</style>
    